<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="90px">
      <el-form-item label="学生名称">{{ form.memberName }}</el-form-item>
      <el-form-item label="手机号">{{ form.cellphone }}</el-form-item>
      <el-form-item label="总课次">
        <el-row :gutter="20">
          <el-col :span="3">{{ form.totalCount }}</el-col>
          <el-col :span="5">
            <el-button type="primary" @click="dialogVisible=true">充值</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="完成课次">{{ form.finishedCount }}</el-form-item>
      <el-form-item label="剩余课次">
        <el-row :gutter="20">
          <el-col :span="3">{{ form.remainingCount }}</el-col>
          <el-col :span="5">
            <el-button type="primary" @click="delMemberTimes">扣课</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="课程有效期">{{ form.classTimeExpireDate }}</el-form-item>
      <el-form-item label="扣课记录">
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="正在查询中。。。"
          border
          fit
          highlight-current-row
          style="width:361px">
          <el-table-column prop="id" label="ID" width="180" />
          <el-table-column prop="deductTime" label="扣课时间" width="180" />
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getMemberList" />
      </el-form-item>
      <el-form-item label="充值记录">
        <el-table
          v-loading="listLoading2"
          :data="list2"
          element-loading-text="正在查询中。。。"
          border
          fit
          highlight-current-row
          style="width:721px">
          <el-table-column prop="classTimes" label="充值课次" width="180" />
          <el-table-column prop="fee" label="充值费用" width="180" />
          <el-table-column prop="remark" label="备注" width="180" />
          <el-table-column prop="created" label="创建时间" width="180" />
        </el-table>
        <pagination
          v-show="total2>0"
          :total="total2"
          :page.sync="listQuery2.page"
          :limit.sync="listQuery2.size"
          @pagination="getList" />
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogVisible" title="充值" width="500px">
      <el-form ref="form" :model="form2" :rules="rules" label-width="80px">
        <el-form-item label="充值课次" prop="classTimes">
          <el-input v-model="form2.classTimes" />
        </el-form-item>
        <el-form-item label="有效期" prop="expireDate">
          <el-date-picker v-model="form2.expireDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="金额" prop="fee">
          <el-input v-model="form2.fee" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form2.remark" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="addMemberTimes">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getMemberDetail,
  getMemberList,
  addMemberTimes,
  delMemberTimes,
  getAddList
} from '@/api/user'
import Pagination from '@/components/Pagination'
import lodash from 'lodash'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      form2: {
        classTimes: '',
        fee: '',
        remark: '',
        expireDate: ''
      },
      rules: {
        classTimes: [{
          required: true,
          message: '请输入课次',
          trigger: 'blur'
        }],
        fee: [{
          required: true,
          message: '请输入金额',
          trigger: 'blur'
        }],
        expireDate: [{
          required: true,
          message: '请选择有效期',
          trigger: 'change'
        }],
        remark: [{
          required: true,
          message: '请填写备注',
          trigger: 'blur'
        }]
      },
      listQuery: {
        index: 0,
        size: 10,
        memberId: null
      },
      listQuery2: {
        index: 0,
        size: 10,
        memberId: null,
        memberName: null
      },
      dialogVisible: false,
      list: null,
      list2: null,
      total: 0,
      total2: 0,
      listLoading: true,
      listLoading2: true,
      memberId: null
    }
  },
  created() {
    this.memberId = this.$route.query.memberId
    this.listQuery.memberId = this.$route.query.memberId
    this.listQuery2.memberId = this.$route.query.memberId
    this.getMemberDetail(this.memberId)
    this.getMemberList(this.memberId)
  },
  methods: {
    getMemberDetail(memberId) {
      getMemberDetail({
        id: memberId
      }).then(res => {
        this.form = res.data.data
        this.listQuery2.memberName = res.data.data.memberName
        this.getList()
      })
    },
    getMemberList(e) {
      if (e && e.page) {
        this.listQuery.index = e.page - 1
      }
      this.listLoading = true
      getMemberList(this.listQuery)
        .then(response => {
          this.list = response.data.data.content
          this.total = response.data.data.totalRecords
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    getList(e) {
      // 充值记录
      if (e && e.page) {
        this.listQuery2.index = e.page - 1
      }
      this.listLoading2 = true
      const data = Object.assign({}, this.listQuery2)
      delete data.searchTime
      getAddList(data)
        .then(response => {
          this.list2 = response.data.data.content
          this.total2 = response.data.data.totalRecords
          this.listLoading2 = false
        })
        .catch(() => {
          this.list2 = []
          this.total2 = 0
          this.listLoading2 = false
        })
    },
    addMemberTimes() {
      const memberId = this.memberId
      this.$refs[`form`].validate(valid => {
        if (valid) {
          const form2 = this.form2
          form2[`memberId`] = memberId
          addMemberTimes(form2).then(res => {
            this.$message({
              message: '充值成功',
              type: 'success'
            })
            this.resetForm()
            this.getMemberDetail(memberId)
            this.getList()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs[`form`].resetFields()
      this.dialogVisible = false
    },

    delMemberTimes: lodash.throttle(function() {
      // 扣课
      const memberId = this.memberId
      this.$confirm('是否继续扣课?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delMemberTimes({
            memberId: memberId
          }).then(res => {
            this.$message({
              message: '扣课成功',
              type: 'success'
            })
            this.dialogVisible = false
            this.getMemberDetail(memberId)
            this.getMemberList(memberId)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }, 3000)
  }
}
</script>
